<template>
	<div class="comic">
		<div class="card-flex">
			<el-card
				:body-style="{ padding: '1px', marginBottom: '1px' }"
				v-for="(item,i) in lists"
				:key="i" class="card-first">
				<img :src="item.imgUrl" class="image multi-content" />
				<div style="padding: 8px;">
					<span>{{ item.name }}</span>
				</div> 
			</el-card>
		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default{
	name:'comic',
	data(){
		return{
			lists: [],
		}
	},
	created() {
		// this.lists = [
		// 	{imgUrl:'https://lain.bgm.tv/pic/cover/m/c3/60/323222_N3YHz.jpg',name:'德古拉'},
		// 	{imgUrl:'https://lain.bgm.tv/pic/cover/m/e9/9d/326731_sYY6N.jpg', name: '#となりの男の子'},
		// 	{imgUrl:'https://img1.baidu.com/it/u=2468515675,505333340&fm=26&fmt=auto',name: '混沌武士'},
		// 	{imgUrl:'http://i0.letvimg.com/vrs/201307/23/4996b18ff4884471842b01402ddf9d66.jpg',name:'动漫'}]
		this.getComic()
	},
	methods:{
		getComic(){
			axios.get('https://mock.mengxuegu.com/mock/613f178f686c29122640fc4d/example/animation').then(res => {
				// console.log(res)
				this.lists = res.data.data.comic
			}).catch(function (error) { console.log(error) })
		}
	}
}
</script>

<style scoped lang="scss">
.comic{
	padding-top: 12vw;
	.card-flex{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0 2%;
		box-sizing: border-box;
		font-size: 13px;
		text-align: center;
	}
	.card-first{
		width: 32%;
		margin-bottom: 8px;
		border-radius: 8px;
		margin-right: 1vw;
	}
	.card-first:nth-child(3n){
		margin-right: 0;
	}
	.bottom {
		margin-top: 6px;
		line-height: 12px;
	}
	.image {
		height: 130px;
		width: 100%;
		display: block;
		border-radius: 8px 8px 0 0;
	}
}
</style>
